<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <base href="<%=basePath%>">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="static/css/H-ui.css" media="all">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <title>新增用户</title>
</head>
<body>

<div style="margin-top:10px;">
<form id="insertF" method="post" class="layui-form"  novalidate>
  <div class="layui-form-item">
    <label class="layui-form-label">名字</label>
    <div class="layui-input-block">
      <input id="name" name="name" autocomplete="off" placeholder="请输入名字" class="layui-input" type="text" style="width:200px;">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input id="age" name="age" autocomplete="off" placeholder="请输入年龄" class="layui-input" type="text" style="width:200px;">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="1" title="男" checked>
      <input type="radio" name="sex" value="0" title="女">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名<font color="red" size="5px">*</font></label>
    <div class="layui-input-block">
      <input id="username" name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input" type="text" style="width:200px;">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码<font color="red" size="5px">*</font></label>
    <div class="layui-input-block">
      <input id="password" name="password" autocomplete="off" placeholder="请输入密码" class="layui-input" type="text" style="width:200px;">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择角色<font color="red" size="5px">*</font></label>
    <div class="layui-input-block"  style="width:200px;">
      <select name="role" lay-verify="required">
        <option value=""></option>
        <option value="1" selected>超级管理员</option>
        <option value="2">采购员</option>
        <option value="3">仓库管理员</option>
        <option value="4">销售员</option>
      </select>
    </div>
  </div>    
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <!-- 必须使用a标签，使用button会自动提交一次user.do -->
      <a class="layui-btn" onclick="insert();">提交</a>
    </div>
  </div>
  </form>
</div>

<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/layer/layer.js"></script>
<script src="static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
// 必须放入layui所规范的元素结构，Form模块才会对起进行重置渲染
layui.use(['element', 'laydate','form'], function(){
    var laydate = layui.laydate;
    var form = layui.form;
    var element = layui.element;
});

// 提交用户信息
function insert(){
	// 获取表单中需要提交的用户信息，insertF 为 from 表单的ID，此处使用jquery取值
    var user = $("#insertF").serialize();
	console.log(user);
	// 使用ajax异步提交表单
    $.post('user.do?mark=insert',user,function(result){
            //获取窗口索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭iframe页面
            parent.layer.alert('操作成功',function(){               
                parent.layer.close(index);
                parent.location.reload(); // 刷新父窗口
            });          
            return;
    });
};
</script>
</body>

</html>

